<template>
	<view class="container">
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					标签
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="tagList[index].tagId" :range="tagList" :range-key="'name'">
						<view class="uni-input">{{tagList[index].name}}</view>
					</picker>
				</view>
			</view>
		</view>
		<editor id="editor" class="ql-container" :placeholder="placeholder" @ready="onEditorReady" show-img-toolbar="true"></editor>
		<button type="warn" @tap="undo">撤销</button>
		<button type="warn" @tap="publishArticle">发表</button>
		<button type="warn" @tap="undo">保存</button>
	</view>
</template>

<script>
	export default {
		/* props:{
			// 工具栏位置 top bottom
			position: {
				type: String,
				default: 'top'
			},
		}, */
		onLoad(options) {
			this.getArticleTagList();
		},
		data() {
			return {
				array: ['中国', '美国', '巴西', '日本'],
				tagList: [],
				index: 0,
				placeholder: '开始输入...',
				editorCtx:"",
				content: "",
				htmlContent: "",
				pickerData: [],
			}
		},
		methods: {
			// 失去焦点时，获取富文本的内容
			getContents() {
				let _this = this
				this.editorCtx.getContents({
					success(res) {
						//this.content = _this.$emit('getContents', res.html)
						console.log("res",res);
						this.content = res.text
						this.htmlContent = res.html
					},
					fail(res) {
						console.log("res",res);
					}
				});
				//console.log("_this",_this);
			},
			
			//下拉框的绑定事件
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value);
				this.index = e.target.value;
				this.pickerData = this.tagList[this.index];
				console.log("pickerData",this.pickerData);
			},
			
			onEditorReady() {
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
				// #endif

				// #ifdef APP-PLUS || H5 ||MP-WEIXIN
				uni.createSelectorQuery().select('#editor').context((res) => {
				  this.editorCtx = res.context;
				  this.editorCtx.getContents({
				  	success: (res) => {
				  		this.content = res.content;
				  	},
					
				  });
				  console.log("this.content",this.content);
				}).exec()
				// #endif
			},
			//文章编辑撤销
			undo() {
				console.log("editorCtx",this.editorCtx);
				this.editorCtx.undo();
			},
			
			//发表文章
			async publishArticle(){
				this.getContents();
				console.log("content",this.content);
				/* const res = await this.$myRequest({
					url: '/article/publishArticle',
					data: {
						"activity":{
							"htmlContent":this.htmlContent
						}
					},
					dataType: "json",
					method:"post",
					
				}); */
				uni.request({
					method:"POST",
					dataType:"json",
					header:"application/json",
					url:"http://localhost:8090/article/publishArticle",
					data:{
						/* "activity":{
							"htmlContent":this.htmlContent
						} */
						"htmlContent":this.htmlContent
					},
				})
			},
			
			//发表文章
			async getArticleTagList(){
				const res = await this.$myRequest({
					url: '/tags/getTagsList',				
				});
				this.tagList = res.data.data;
				console.log("tagList",this.tagList);
			},
		}
	}
</script>

<style>
	.container {
		padding: 10px;
	}

	#editor {
		width: 100%;
		height: 300px;
		background-color: #FFFFFF;
	}

	button {
		margin-top: 10px;
	}
</style>
